<template>
  <div class="bzs">
    <div id="echartsBzs" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      echartsBzs: null,
      options: { XZBZ: 0, XZRS: 0, XZDFP: 0, SYBZ: 0, SYRS: 0, SYDFP: 0 }
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.map.getBzrsAndDfp({
          dep_code: this.depCode
        })
        console.log(res)
        //赋值给变量
        this.options = res
      } catch (error) {
        console.log(error)
      }
      // 基于准备好的dom，初始化echarts实例
      this.echartsBzs = this.$echarts.init(
        document.getElementById('echartsBzs')
      )
      var option = {
        title: [
          {
            text: '行政编制数',
            left: '16.5%',
            top: '43%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '16',
              color: '#fff',
              textAlign: 'center'
            }
          },
          {
            text: '实有人数',
            left: '49.5%',
            top: '43%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '16',
              textAlign: 'center'
            }
          },
          {
            text: '待分配',
            left: '82%',
            top: '43%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '16',
              textAlign: 'center'
            }
          },
          {
            text: '事业编制数',
            left: '16.5%',
            top: '90%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '16',
              color: '#fff',
              textAlign: 'center'
            }
          },
          {
            text: '实有人数',
            left: '49%',
            top: '90%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '16',
              textAlign: 'center'
            }
          },
          {
            text: '待分配',
            left: '82%',
            top: '90%',
            textAlign: 'center',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: '16',
              textAlign: 'center'
            }
          }
        ],

        // 第一个图表
        series: [
          {
            type: 'pie',
            hoverAnimation: true, // 鼠标经过的特效
            radius: ['55%', '60%'],
            center: ['17%', '35%'],
            startAngle: 200,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.XZBZ + this.options.XZDFP,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#00cefc'
                        },
                        {
                          offset: 1,
                          color: '#367bec'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: ((this.options.XZBZ + this.options.XZDFP) * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          },

          {
            type: 'pie',
            hoverAnimation: true,
            radius: ['55%', '60%'],
            center: ['50%', '35%'],
            startAngle: 200,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.XZRS,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#9FE6B8'
                        },
                        {
                          offset: 1,
                          color: '#32C5E9'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: (this.options.XZRS * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          },

          {
            type: 'pie',
            hoverAnimation: true,
            radius: ['55%', '60%'],
            center: ['83%', '35%'],
            startAngle: 196,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.XZDFP,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#FDFF5C'
                        },
                        {
                          offset: 1,
                          color: '#FFDB5C'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: (this.options.XZDFP * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          },

          {
            type: 'pie',
            hoverAnimation: true, // 鼠标经过的特效
            radius: ['55%', '60%'],
            center: ['17%', '85%'],
            startAngle: 200,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.SYBZ + this.options.SYDFP,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#00cefc'
                        },
                        {
                          offset: 1,
                          color: '#367bec'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: ((this.options.SYBZ + this.options.SYDFP) * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          },

          {
            type: 'pie',
            hoverAnimation: true,
            radius: ['55%', '60%'],
            center: ['50%', '85%'],
            startAngle: 197,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.SYRS,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#9FE6B8'
                        },
                        {
                          offset: 1,
                          color: '#32C5E9'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: (this.options.SYRS * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          },

          {
            type: 'pie',
            hoverAnimation: true,
            radius: ['55%', '60%'],
            center: ['83%', '85%'],
            startAngle: 200,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: this.options.SYDFP,
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#FDFF5C'
                        },
                        {
                          offset: 1,
                          color: '#FFDB5C'
                        }
                      ]
                    )
                  }
                },
                label: {
                  formatter: '{c}',
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bolder',
                    color: '#ccc'
                  }
                }
              },
              {
                value: (this.options.SYDFP * 2) / 3,
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  },
                  emphasis: {
                    color: 'rgba(0,0,0,0)',
                    borderWidth: 0
                  }
                }
              }
            ]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      option && this.echartsBzs.setOption(option, true)
      // 响应式变化
      window.addEventListener('resize', () => this.echartsBzs.resize(), false)
    }
  }
}
</script>

<style lang='scss'>
.bzs {
  width: 100%;
  height: 32%;
  margin-top: 1%;
  background: rgba(0, 18, 67, 0.4);

  #echartsBzs {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: electronicFont;
    font-size: 30px;
  }
}
</style>
